<script setup>
    import * as echarts from "echarts"
    import { onMounted } from 'vue'

    let eCharts = null
    let treatmentLine = $ref(null)

    onMounted(() => {
        init()
    })

    const init = () => {
        if(eCharts) eCharts.clear()
        let dataAxis = ['6/10', '7/10', '8/10', '9/10', '10/10']


        let option = {
            tooltip: {
                trigger: 'axis',
                axisPointer: { // 坐标轴指示器，坐标轴触发有效
                    type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
                },
                backgroundColor: "#0157DA",
                borderWidth: "0",
                textStyle: {
                    color: "#fff"
                },
            },
            legend: {
                top: 10,
                right: 30,
                itemWidth: 12,
                itemHeight: 12,
                textStyle: {
                    width: 50,
                    color: '#fff',
                },
                data: ['应发', '已发', '发放率']
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '10%',
                containLabel: true
            },
            xAxis: {
                data: dataAxis,
                axisLabel: {
                    // inside: true,
                    color: '#fff',
                    // interval:0,
                    // rotate:40
                },
                axisTick: {
                    show: false
                },
                axisLine: {
                    show: false
                },
                z: 10
            },
            yAxis: [
                {
                    axisLine: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    },
                    splitLine: {
                        show: false
                    },
                    axisLabel: {
                        color: '#fff',
                    }
                },
                {
                    type: 'value',
                    min: 0,
                    max: 100,
                    interval: 20,
                    splitLine:{show:false},
                    axisLabel: {
                        formatter: '{value} %',
                        color: '#fff',
                    },
                    axisLine: {
                        lineStyle: {
                            color: '#5e859e',//纵坐标轴和字体颜色
                            width: 2
                        }
                    }
                }
            ],
            series: [{
                    name: '已发',
                    type: 'bar',
                    stack: '余额',
                    barWidth: 18,
                    data: [1200, 1320, 1010, 1034, 900, 2030, 2100],
                    itemStyle: {
                        normal: {
                            color: '#22AC38'
                        },
                    },
                },
                {
                    name: '应发',
                    type: 'bar',
                    stack: '余额',
                    barWidth: 18,
                    data: [2020, 1802, 1901, 2304, 2900, 3300, 3010],
                    itemStyle: {
                        normal: {
                            color: '#FFFF00',
                            barBorderRadius: [20, 20, 0, 0]
                        },
                    },
                },
                {
                    name: '发放率',
                    data: [2200, 4503, 3001, 3054, 2900, 3030, 3200],
                    type: 'line',
                    itemStyle: {
                        normal: {
                            color: "#00FFFF",
                        },
                    },
                }
            ]
        }

        if(!eCharts) eCharts = echarts.init(treatmentLine)
        eCharts.setOption(option)
    }

    defineExpose({
        init
    })
    

</script>

<template>
    <div class="treatment-wrap card-box">
        <div class="card-title"><div class="title">待遇发放金额统计</div></div>

        <div class="treatment-line" ref="treatmentLine"></div>

    </div>
</template>

<style lang="less" scoped>
    .treatment-wrap{
        height: 294px;

        .treatment-line{
            width: 100%;
            height: 260px;
        }
    }
</style>